import React from 'react';
import { Nav } from 'office-ui-fabric-react';
import navStyles from './SideBar.module.scss';

import RouteContext from '../contexts/RouteContext';

const mapRoutesToItems = (items, currentPaths) =>
  items.map(route => {
    return {
      key: route.key,
      name: route.title,
      url: route.path,
      icon: route.icon,
      links: route.children
        ? mapRoutesToItems(route.children, currentPaths)
        : null,
      collapseByDefault: currentPaths.some(item => item.key === route.key)
    };
  });

const SideBar = () => {
  return (
    <RouteContext.Consumer>
      {({ routes, currentRoute, currentPaths }) => (
        <Nav
          selectedKey={currentRoute.key}
          className={navStyles.sidebar}
          groups={[
            {
              links: mapRoutesToItems(routes, currentPaths)
            }
          ]}
        />
      )}
    </RouteContext.Consumer>
  );
};

export default SideBar;
